<template>
	<view>
		<!-- 懒加载动画 -->
		<view class="loading-box">
			<u-loading :show="loadingone" color="#41ADBA" size="70"></u-loading>
		</view>
		<view v-show="!loadingone">
			<navbar name="更多菜谱"></navbar>
			<view v-for="(items,idxs) in records" :key="idx">
				<view class="w706 view-food weui-flex" @tap="nav('/pages/subpackage/find/menu/menu?id='+items.id)">
					<view class="food-image">
						<u-lazy-load border-radius="10" height="129" img-mode="aspectFill" :image="items.pic">
						</u-lazy-load>
					</view>
					<view class="foodtitle-wiew">
						<view>
							<!-- 香菇蒸鸡腿 -->
							{{items.name}}
						</view>
						<view class="kindView">
							<block v-for="(item,idx) in items.menuinfo" :key="idx">
								<view class="kindItem">
									{{item}}
								</view>
							</block>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uLoading from "@/uview-ui/components/u-loading/u-loading.vue"
import uNavbar from "@/uview-ui/components/u-navbar/u-navbar.vue"
import uLine from "@/uview-ui/components/u-line/u-line.vue"
import uLazyLoad from "@/uview-ui/components/u-lazy-load/u-lazy-load.vue"
import uParse from "@/uview-ui/components/u-parse/u-parse.vue"
import uSearch from "@/uview-ui/components/u-search/u-search.vue"
	export default {
		components: {
			uLoading,
			uLazyLoad,
		},
		data() {
			return {
				records: [],
				loadingone: false,
				kindList: [],
				pageCurrent: 1,
				pageSize: 10
			}
		},
		onLoad(e) {
			this.getMeans('', this.pageCurrent, this.pageSize, false)
		},
		onReachBottom: function() { //分页加载
			let pageCurrent = this.pageCurrent += 1
			this.pageCurrent = pageCurrent
			this.getMeans(2, pageCurrent, this.pageSize, true); //获取帖子
		},
		methods: {
			getMeans(keyword, pageCurrent, pageSize,onReach) {
				let _this = this;
				let fdata = {
					keyword: keyword,
					pageCurrent: pageCurrent,
					pageSize: pageSize
				}
				this.$api.get(global.apiUrls.getMeans, fdata)
					.then(res => {
						if (res.data.code == 1000) {
							let records = res.data.result.records;
							for (let i = 0; i < records.length; i++) {
								records[i].menuinfo = records[i].menuinfo.replace("[", "")
								records[i].menuinfo = records[i].menuinfo.replace("]", "")
								records[i].menuinfo = records[i].menuinfo.split(',')
							}
							if (onReach) { //分页
								_this.records = _this.records.concat(records)
							} else {
								_this.records = records
							}

						}
					})
			},
			nav(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	.w706 {
		width: 706upx;
		margin: 30upx auto 0;
		background: #fff;
		border-radius: 25upx;
	}

	.view-food {
		padding: 22upx 25upx 20upx;

		.food-image {
			width: 129upx;
			height: 129upx;
		}

		.foodtitle-wiew {
			padding: 12upx 0 0 20upx;
			font-size: 26upx;
			font-weight: 500;
			color: #4A4A4A;
			line-height: 37upx;
		}

		.kindView {
			width: 526upx;
			margin-left: -20upx;

			.kindItem {
				display: inline-block;
				padding: 4upx 10upx;
				margin: 25upx 0 0 20upx;
				background: #2EA7E0;
				border-radius: 8upx;
				font-size: 24upx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 33upx;
			}
		}
	}

	.view-food {
		padding: 22upx 25upx 20upx;

		.food-image {
			width: 129upx;
			height: 129upx;
		}

		.foodtitle-wiew {
			padding: 12upx 0 0 20upx;
			font-size: 26upx;
			font-weight: 500;
			color: #4A4A4A;
			line-height: 37upx;
		}

		.kindView {
			width: 526upx;
			margin-left: -20upx;

			.kindItem {
				display: inline-block;
				padding: 4upx 10upx;
				margin: 25upx 0 0 20upx;
				background: #2EA7E0;
				border-radius: 8upx;
				font-size: 24upx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 33upx;
			}
		}
	}
</style>
